React is the most popular front end library for the last few years.
Vue is a front end framework that’s catching up in popularity with React in the last few years.
It’s hard to choose between the 2 frameworks since they both their pros and cons. When we choose one, we’ve to stick with it for a few years.
In this article, we’ll look at how we write event handling code with React and Vue and which one is more convenient.
Basic Event Handling
With React, we bind our event handlers straight into the JSX components.
For example, we can write the following code to do handle clicks with React:
import React, { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div className="App">
<button onClick={increment}>Increment</button>
<div>{count}</div>
</div>
);
}
In the code above, we added the increment click handler and we pass that into the onClick prop so that when we click the Increment button, we’ll see the count value increase.
With Vue, we can write the following to do the same thing:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Increment</button>
<div>{{count}}</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js :
const app = new Vue({
el: "#app",
data: {
count: 0
},
methods: {
increment() {
this.count++;
}
}
});
In the code above, we have the increment handler as we did with the React example.
However, updating values is easier since we update the count directly instead of calling a function returned from the useState hook to update the count.
Passing in the click handler is pretty much done the same way, except that we have to remember to use the @click directive.
Handling clicks is pretty much the same in either case.
Modifying Event Handling Behavior
Vue has event modifiers to modify the behavior of how event handlers handle events.
We can put them after the event handling directive. For example, if we want to prevent the default submit behavior in a form, we write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="onSubmit">
<input v-model="name" />
</form>
</div>
<script src="index.js"></script>
</body>
</html>
index.js :
const app = new Vue({
el: "#app",
data: {
name: ""
},
methods: {
onSubmit() {
alert(this.name);
}
}
});
to add a form with a submit handler that doesn’t do the default submit behavior.
The .prevent modifier is a handy shortcut for calling e.preventDefault in our submit handler.
With React, we have to call preventDefault() .
The equivalent example in React would be:
import React, { useState } from "react";
export default function App() {
const [name, setName] = useState("");
const onSubmit = e => {
e.preventDefault();
alert(name);
};
return (
<div className="App">
<form onSubmit={onSubmit}>
<input onChange={e => setName(e.target.value)} />
</form>
</div>
);
}
The Vue version is slightly shorter, but it’s not too much different.
Handling Key Presses
With Vue, we can handle keypresses with our event handlers with the v-on directive’s modifiers as we did with clicks.
For example, if we want to display an alert when we control-click on a div, we can write:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-on:click.ctrl="help">Help</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js :
const app = new Vue({
el: "#app",
data: {},
methods: {
help() {
alert("help");
}
}
});
In the code above, we have:
v-on:click.ctrl="help"
to run the help method when we control-click on the div.
With React, we have to use plain JavaScript to do this:
import React from "react";
export default function App() {
const onClick = e => {
e.stopPropagation();
if (e.ctrlKey) {
alert("help");
}
};
return (
<div className="App">
<div onClick={onClick}>Help</div>
</div>
);
}
In the code above, we have an onClick handler that first stops the propagation of the events to its parent.
Then we check if the ctrlKey is pressed with the click.
Then we display the alert if e.ctrlKey is true , which means the control key is pressed.
This is definitely more complex with React. If we want to handle even more complex keyboard and mouse press combinations, this gets even harder.
Verdict
Event handling is better with Vue since it has modifiers to modify the behavior of event handling directives.
This is especially true when we need to handle more complex interactions like keyboard and mouse combinations.
There’s no easy way to do that with React.
